import RTServer from '../../scripts/rt-server';
import moment from 'moment';
import _ from 'lodash';
import URL from 'url';

const HomeComponent = {
    data() {
        return {
            title: '',

            leftHostTeamName: '',
            leftGuestTeamName: '',
            leftHostScore: 0,
            leftGuestScore: 0,
            leftRound: '一',
            leftCountDownSecond: '',
            leftCountDownEndTime: '',
            leftCountDownTimer: null,

            rightHostTeamName: '',
            rightGuestTeamName: '',
            rightHostScore: 0,
            rightGuestScore: 0,
            rightRound: '一',
            rightCountDownSecond: '',
            rightCountDownEndTime: '',
            rightCountDownTimer: null,
        };
    },
    mounted() {
        const that = this;
        const parsedUrl = URL.parse(window.location.href);
        const host = that.$route.query.host || parsedUrl.host;
        RTServer.setServerUrl(`ws://${host}/app`);
        RTServer.connect();
        that.loadData();
        const actionCallbacks = {
            LEFT_INFO: that.onLeftBoardInfo,
            LEFT_COUNT_DOWN: that.onLeftCountDown,
            RIGHT_INFO: that.onRightBoardInfo,
            RIGHT_COUNT_DOWN: that.onRightCountDown,
        };
        _.each(actionCallbacks, function (func, name) {
            RTServer.on(name, function (data) {
                func.call(that, data);
            });
        });

    },
    filters: {
        datetimeFromSeconds: function (seconds, fmt) {
            return moment(seconds * 1000).format(fmt);
        }
    },
    methods: {
        clearLeftCountDownTimer: function () {
            const that = this;
            if (that.leftCountDownTimer) {
                clearInterval(that.leftCountDownTimer);
                that.leftCountDownTimer = null;
            }
        },
        onLeftBoardInfo: function ({title, round, hostTeamName, guestTeamName, hostScore, guestScore}) {
            const that = this;
            _.extend(that, {
                title: title || that.title,
                leftRound: round,
                leftHostTeamName: hostTeamName,
                leftGuestTeamName: guestTeamName,
                leftHostScore: hostScore,
                leftGuestScore: guestScore
            });
            that.storeData();
        },
        onLeftCountDown: function ({countDownSecond}) {
            const that = this;
            that.clearLeftCountDownTimer();
            that.leftCountDownEndTime = moment().valueOf() + countDownSecond * 1000;
            that.leftCountDownSecond = countDownSecond;
            that.leftCountDownTimer = setInterval(function () {
                that.leftTimerCallback();
            }, 250);
            that.storeData();
        },
        leftTimerCallback: function () {
            const that = this;
            const countDownSecond = Math.ceil((that.leftCountDownEndTime - moment().valueOf()) / 1000);
            if (countDownSecond <= 0) {
                that.leftCountDownSecond = 0;
                that.clearLeftCountDownTimer();
                that.leftCountDownEnd();
            } else {
                that.leftCountDownSecond = countDownSecond;
            }
        },
        leftCountDownEnd: function () {
            this.playAudio();
        },
        clearRightCountDownTimer: function () {
            const that = this;
            if (that.rightCountDownTimer) {
                clearInterval(that.rightCountDownTimer);
                that.rightCountDownTimer = null;
            }
        },
        onRightBoardInfo: function ({title, round, hostTeamName, guestTeamName, hostScore, guestScore}) {
            const that = this;
            _.extend(that, {
                title: title || that.title,
                rightRound: round,
                rightHostTeamName: hostTeamName,
                rightGuestTeamName: guestTeamName,
                rightHostScore: hostScore,
                rightGuestScore: guestScore
            });
            that.storeData();
        },
        onRightCountDown: function ({countDownSecond}) {
            const that = this;
            that.clearRightCountDownTimer();
            that.rightCountDownEndTime = moment().valueOf() + countDownSecond * 1000;
            that.rightCountDownSecond = countDownSecond;
            that.rightCountDownTimer = setInterval(function () {
                that.rightTimerCallback();
            }, 250);
            that.storeData();
        },

        rightTimerCallback: function () {
            const that = this;
            const countDownSecond = Math.ceil((that.rightCountDownEndTime - moment().valueOf()) / 1000);
            if (countDownSecond <= 0) {
                that.rightCountDownSecond = 0;
                that.clearRightCountDownTimer();
                that.rightCountDownEnd();
            } else {
                that.rightCountDownSecond = countDownSecond;
            }
        },
        rightCountDownEnd: function () {
            this.playAudio();
        },
        playAudio: function () {
            document.getElementById('audio').play(); //播放
        },
        storeData: function () {
            const that = this;
            const data = _.pick(that, [
                'title',
                'leftHostTeamName',
                'leftGuestTeamName',
                'leftHostScore',
                'leftGuestScore',
                'leftRound',
                'leftCountDownEndTime',
                'rightHostTeamName',
                'rightGuestTeamName',
                'rightHostScore',
                'rightGuestScore',
                'rightRound',
                'rightCountDownEndTime',
            ]);
            localStorage.setItem('SCOREBOARD_APP_DATA', JSON.stringify(data));
        },
        loadData: function () {
            const that = this;
            const storedData = localStorage.getItem('SCOREBOARD_APP_DATA');
            if (storedData) {
                _.extend(that, JSON.parse(storedData));
                const leftCountDownSecond = Math.ceil((that.leftCountDownEndTime - moment().valueOf()) / 1000);
                if (leftCountDownSecond <= 0) {
                    that.leftCountDownSecond = 0;
                } else {
                    that.leftCountDownSecond = leftCountDownSecond;
                    that.rightCountDownTimer = setInterval(function () {
                        that.leftTimerCallback();
                    }, 250);
                }
                const rightCountDownSecond = Math.ceil((that.rightCountDownEndTime - moment().valueOf()) / 1000);
                if (rightCountDownSecond <= 0) {
                    that.rightCountDownSecond = 0;
                } else {
                    that.rightCountDownSecond = rightCountDownSecond;
                    that.rightCountDownTimer = setInterval(function () {
                        that.rightTimerCallback();
                    }, 250);
                }
            }
        }
    }
};

export default HomeComponent;
